.lesson-card{
  box-sizing: border-box;
  width: 16.875rem;
  box-shadow: 0 4px 30px rgba(0,80,179 ,8%);
  position: relative;
  .lesson-head{
    position: relative;
    .lesson-img{
      height: 9.375rem;
      width: 100%;
      border: 0;
      vertical-align: middle;
    }
    .count{
      z-index: 10;
      color: white;
      display: inline-block;
      position: absolute;
      padding: 2px 4px;
      background-color: rgba(0,0,0,.5);
      i{
        font-size: 1.125rem;
        margin-right: 2px;
      }
    }
    .lesson-ClassHourCount{
      right: .5rem;
      top: .5rem;
    }
    .lesson-VisitCount{
      left: .5rem;
      bottom: .5rem;
    }
    .lesson-CommentCount{
      right: .5rem;
      bottom: .5rem;
    }
  }
  .lesson-title{
    font-size: 1rem;
    margin-bottom: .25rem;
    text-align: justify;
    font-weight: bold;
    overflow:hidden; 
    text-overflow:ellipsis;
    display:-webkit-box; 
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2; 
    transition: color .3s;
  }
  .lesson-description{
    font-size: .9375rem;
    margin-bottom: .25rem;
    color: #333;
    overflow:hidden; //超出的文本隐藏
    text-overflow:ellipsis; //溢出用省略号显示
    white-space:nowrap; //溢出不换行
  }

  .lesson-author{
    width: 60%;
    overflow:hidden; //超出的文本隐藏
    text-overflow:ellipsis; //溢出用省略号显示
    white-space:nowrap; //溢出不换行
    i{
      font-size: 1.125rem !important;
    }
  }
  .lesson-LikeCount{
    flex: 1;
    text-align: right;
    span{
      display: inline;
      padding: 0 3px;
      color: #fe7731;
      background-color: #fdeae0;
    }
  }

  &:hover .lesson-title{
    color: #2080f7;
  }
}
